<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 第一步:引入echarts核心库 -->
    <script src="./echarts.js"></script>
    <style>
        .box {
            width: 600px;
            height: 400px;
            margin: 50px auto;
            border: 1px dashed pink;
        }
    </style>
</head>

<body>
    <!-- 准备一个容器:展示图形图标地方 务必要有宽度与高度-->
    <div class="box"></div>
</body>

</html>
<script>
    //柱状图
    //第一步:echarts.init初始化echarts实例
    let mycharts = echarts.init(document.querySelector('.box'));
    //第二步:初始化配置项
    //设置配置项:(配置对象,里面K你能随便写吗?)

    //设置配置项
    let option = {
        //图形图标的布局,图形在容器里面位置调试！！！！
        grid:{
        //    left:50,
        //    top:30,
        //    right:10,
        //    bottom:30
        },
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis:[
            {},
            {},
        ],
        series: [
            {
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                },
                yAxisIndex:0
            },
            {
                type:'line',
                data:[30,89,92,123,24,11,100],
                yAxisIndex:1
            }
        ]
    };
    mycharts.setOption(option);
</script>